<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试题册</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="/static/css/my_collections.css"> -->
</head>

<body>
    <div class="bg-light">
        <div class="container bg-light">
            <nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
                <a class="navbar-brand" href="./index.html">
                    <img src="/static/img/sut.jpg" style="width: 32px;height: 32px;" alt=""> Spoc
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item ">
                            <a class="nav-link" href="http://127.0.0.1/course/mainPage">课程</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="http://127.0.0.1/course/my_collections">试题册</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                    </form>
                </div>
            </nav>
        </div>
    </div>

    <div class="container" id="app" v-if="state==true">
        <!-- 课程导航栏 只有手机端显示 -->
        <div>
            <ul class="nav nav-tabs d-md-none">
                <li class="nav-item" v-for="(items, indexs) in courseList" @click="changeCourse(indexs)">
                    <a class="nav-link" v-bind:class="{active:indexs==current}" href="javascript:void(0)">{{ items.name }}</a>
                </li>
            </ul>
        </div>
        <div class="row">
            <!--左侧边栏 手机端隐藏-->
            <div class="col-3 shadow-sm d-none d-md-flex">
                <div class="card" style="height: 665px">
                    <img style="min-height: 250px;" class="card-img-top" :src="current==0?'../static/img/java.jpg':'../static/img/cg.jpg'" alt="课程">
                    <div class="card-body">
                        <h5 class="card-title">{{ name }}</h5>
                        <p class="card-text">good good study,day day up</p>
                    </div>
                    <div class="list-group list-group-flush">
                        <button v-for="(item, index) in courseList" @click="changeCourse(index)" v-bind:class="{active:index==current}" type="button" class="list-group-item list-group-item-action">{{ item.name }}</button>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <button class="list-group-item list-group-item-action disabled">关于我们</button>
                            <button class="list-group-item list-group-item-action disabled">意见反馈</button>
                            <button class="list-group-item list-group-item-action disabled">技术咨询</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col shadow">
                <div class="row" v-for="item in collections">
                    <div class="list-group-item list-group-item-action" style="margin:0;" for="">
                        <div class="form-group row">
                            <h5 class="col">{{item.describe}}</h5>
                        </div>
                        <div class="form-group row" v-if="item.type!='ShortAnswerQuestion'">
                            <div class="col">
                                <div class="radio" v-for="elem in item.options">
                                    <label :for="elem.id" class="list-group-item list-group-item-action">
                                        <input :type="item.type=='SingleSelection'?'radio':'checkbox'" :name="elem.tqNo" :id="elem.id" :value="elem.option">
                                        {{elem.option}}.{{elem.optionDescription}}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="answer">
                            <div class="form-group">
                                <a class="btn btn-outline-primary" data-toggle="collapse" :href="'#'+'answer'+item.tqNo" role="button" aria-expanded="false" :aria-controls="'answer'+item.tqNo">查看答案</a>
                                <!-- <button class="btn btn-outline-primary" @click="collect(item.tqNo)">收藏</button> -->
                                <button class="btn btn-outline-primary" @click="cancelCollect(item.tqNo)">取消收藏</button>
                            </div>
                            <div class="collapse" :id="'answer'+item.tqNo">
                                <div class="card card-body">
                                    <div class="form-group row">
                                        <div class="col">
                                            参考答案:{{item.answer}}
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col">
                                            解析:{{item.parsing}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/static/js/my_collections.js"></script>
</body>

</html>